<template>
    <div class="banner" :mouseover="stop()" :mouseout="move()" >
        <img v-for="(item, index) in imgData" :key="index" :src="item" v-show="cur===index"/>
        <!-- <div class="banner-circle">
            <ul >
                <li v-for="(item, index) in imgData" :key="index" v-show="cur===index" ></li>
            </ul>
        </div> -->
    </div>

</template>

<script>
import { inject, reactive, toRefs, onMounted, onUnmounted } from 'vue'

export default {
    setup () {
        const state = reactive({
            imgData: inject('imgData'),
            cur: 0,// 初始化值
            timer: null
        })
        const autoplay = () => {
            state.cur++
            state.cur = state.cur % state.imgData.length
        }
        const play = () => {
            state.timer = setInterval(autoplay, 2000)
        }
        onMounted(() => {
            play()
        })
        onUnmounted(() => {
            
        })
        const stop = () => {
            //console.log(state.imgData.length)
            clearInterval(state.timer)
        }
        const move = () => {
            play()
        }
        return {
            ...toRefs(state),
            stop,
            move
        }
    }
}
</script>
<style scoped>

</style>